<!--
* @Description: 异步导入导出记录表
* @Author: DHL
* @Date: 2022-03-14 21:16:02
 * @LastEditors: DHL
 * @LastEditTime: 2022-06-15 09:29:42
-->

<template>
  <tw-drawer
    v-model="visible"
    :title="title"
    appendToBody
    :loading="loading"
    size="50%"
    @close="handleClose"
  >
    <div class="upload-file-wrap">
      <el-upload drag :action="state.uploadUrl" :headers="state.headers">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text"> 拖放文件 或者 <em>点击上传</em> </div>
        <template #tip>
          <div class="el-upload__tip"> 只能上传.xlsx文件，一次只能选取1个文件进行提交 </div>
        </template>
      </el-upload>
    </div>

    <div>
      <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
        <!-- 查询表单 -->
        <template #header>
          <el-form ref="searchFormRef" :model="searchForm" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="结果">
                  <el-select v-model="searchForm.result" clearable placeholder="请选择结果">
                    <tw-dic dicKey="IMPORT_EXPORT_RESULT"></tw-dic>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="附件名称">
                  <el-input
                    v-model="searchForm.name"
                    clearable
                    placeholder="请输入附件名称"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="创建人">
                  <el-input
                    v-model="searchForm.creator"
                    clearable
                    placeholder="请输入创建人"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="searchForm.createDate"
                    type="datetime"
                    clearable
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择创建时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="结果时间">
                  <div class="flex-space-between">
                    <el-date-picker
                      v-model="searchForm.resultDateBegin"
                      type="datetime"
                      clearable
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请输入结果时间-开始"
                    ></el-date-picker>
                    <div class="split-line">-</div>
                    <el-date-picker
                      v-model="searchForm.resultDateEnd"
                      type="datetime"
                      clearable
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请输入结果时间-结束"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>

        <!-- 数据表格 -->
      </tw-layout>
    </div>
  </tw-drawer>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .upload-file-wrap {
    padding: 10px;
  }
</style>
